<template>
	<comp-navbar title="仪式模版" bgColor="#fff" :rightShow="false" :fixed="true" :z-index="999999"></comp-navbar>
	<view class="yishi-wrap">
		<!-- <up-dropdown>
			<up-dropdown-item v-model="value1" title="全部展厅" :options="options1"></up-dropdown-item>
			<up-dropdown-item v-model="value2" title="全部仪式" :options="options2"></up-dropdown-item>
			<up-dropdown-item v-model="value3" title="筛选" :options="options3"></up-dropdown-item>
		</up-dropdown> -->
		<view class="search_wrap flex_betweent">
			<view class="search_content flex_betweent">
				<input type="text" placeholder="搜索预约单号/客户姓名/手机号" v-model="search" class="search_input" />
				<view class="iconfont icon-sousuo" @click="handleSearch">
				</view>
			</view>
			<view class="reservation" @click="jump">预约</view>
		</view>
		<view class="temp-wrap">
			<template v-if="list.length">
				<view class="temp-item" v-for="(item,index) in list" :key="index"
					@click="jumpdetail(item.CeremonyOrdersID,item.ChannelExhibitionHallID)">
					<view class="label">ID: {{item.OrderNumber}}</view>
					<view class="title">{{item.Ceremonytheme}}</view>
					<view class="flex_betweent text">
						<view class="name">{{item.TemplateName}}</view>
						<view class="mark">{{item.CeremonyTypeName}}</view>
					</view>
					<view class="time flex">
						<view class="iconfont icon-shijian">

						</view>{{item.FinallTime}}
					</view>
				</view>
			</template>
			<view class="no-data" v-else>暂无数据</view>
		</view>
		<!-- <view class="temp-wrap">
			<view class="temp-item" @click="jumpdetail">
			<image src="/static/img/home/avatar.png" class="com-img"></image>
				<view class="label">ID: 276485985995869857978</view>
				<view class="title">测试占三</view>
				<view class="flex_betweent text">
					<view class="name">测试动画2</view>
					<view class="mark">追思会</view>
				</view>
				<view class="time flex">
					<view class="iconfont icon-shijian">

					</view>
					2024-04-09 21:00-23:00
				</view>
			</view>
		</view> -->
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		request,
		baseUrl
	} from '@/utils/request.js'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	// const value1 = ref(1);
	// const value2 = ref(2);
	// const value3 = ref(1);
	// const options1 = ref([{
	// 		label: '默认排序',
	// 		value: 1,
	// 	},
	// 	{
	// 		label: '电影',
	// 		value: 2,
	// 	},
	// 	{
	// 		label: '测试',
	// 		value: 3,
	// 	}
	// ])
	// const options2 = ref([{
	// 		label: '默认',
	// 		value: 1,
	// 	},
	// 	{
	// 		label: '仪式1',
	// 		value: 2,
	// 	},
	// 	{
	// 		label: '仪式2',
	// 		value: 3,
	// 	}
	// ])
	// const options3 = ref([{
	// 		label: '默认排序',
	// 		value: 1,
	// 	},
	// 	{
	// 		label: '条件1',
	// 		value: 2,
	// 	},
	// 	{
	// 		label: '价格优先',
	// 		value: 3,
	// 	}
	// ])

	const list = ref([])
	const search = ref('');
	const getList = async (data) => {
		const res = await request({
			url: '/SZ_CeremonyOrders/GetCeremonyOrdersList',
			method: 'GET',
			data
		})
		list.value = res.Data?.map(v => {
			const stime = v.StartTime.split(' ')
			const etime = v.EndTime.split(' ')
			const FinallTime = `${stime[0]} ${stime[1]}-${etime[1]}`
			return {
				...v,
				FinallTime
			}
		});
	}
	// 预约
	const jump = () => {
		uni.navigateTo({
			url: '/pages/yishi/addys?id'
		})
	}
	// 详情
	const jumpdetail = (id, zid) => {
		uni.navigateTo({
			url: `/pages/yishi/detail?id=${id}&zid=${zid}`
		})
	}

	// 搜索
	const handleSearch = () => {
		console.log('search', search.value)
		getList({
			para: search.value || '',
		})
	}
	onLoad(() => {

		const app = getApp()


	})
	onMounted(() => {
		console.log('onmountend...')
	})
	onShow(() => {
		console.log('show..')
		const app = getApp()
		if (app.globalData?.zid) {
			getList({
				ChannelExhibitionHallID: app.globalData.zid
			})
		} else {
			getList()
		}
	})
</script>

<style lang="scss" scoped>
	:deep(.u-navbar--fixed) {
		z-index: 999999 !important;
	}

	.yishi-wrap {
		padding: 120rpx 0 80rpx 0;

		.search_wrap {
			padding: 20rpx;

			.search_content {
				flex: 1;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				border: 1rpx solid $bor-color;
				box-sizing: border-box;
				border-radius: 6rpx;

				.search_input {
					width: 100%;
				}
			}

			.reservation {
				width: 120rpx;
				height: 60rpx;
				margin-left: 20rpx;
				line-height: 60rpx;
				font-size: 28rpx;
				text-align: center;
				color: #fff;
				background-color: $act-color;
				border-radius: 6rpx;
			}

		}

		.temp-wrap {
			padding: 20rpx;
			color: $base-color;

			.temp-item {
				margin-bottom: 40rpx;
				padding: 40rpx 20rpx;
				// box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.2);
				// border-radius: 40rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid $bor-color;
			}

			.label {
				padding: 0 0 20rpx 0;
			}

			.title {
				padding: 0 0 20rpx 0;
				color: #000;
			}

			.text {
				padding: 10rpx 0;

				.mark {
					width: 100rpx;
					height: 46rpx;
					text-align: center;
					line-height: 46rpx;
					font-size: 24rpx;
					color: $act-color;
					border: 1rpx solid $act-color;
					border-radius: 10rpx;
				}
			}

			.com-img {
				width: 100% !important;
			}
		}
	}
</style>